<template>
  <div class="app-container" v-loading="loading">
    <p>我报名的监考活动</p>
    <hr />
    <div v-for="(item, index) in items" :key="item.id">
      <el-row type="flex" justify="end" >
        <el-col :span=24><h4>{{item.active_name}}</h4>
          <p>发布部门：{{item.department_name}}</p>
          <p>报名时间：{{item.signup_date}}
          <p v-if="item.train_test_time !== null ">培训考试时间： {{item.train_test_time }}</p>
          <p>考试开始时间：{{item.exam_start_date}}</p>
          <p>考试结束时间：{{item.exam_end_date}}</p>
          <p>考务人员类型：{{item.personnel_type}}</p>
          <p>费用标准：{{item.examinationFee}}</p>
          <span>报名状态：</span>
          <el-tag size="large" type="success" v-if="item.signup_status === '1'">报名成功</el-tag>
          <el-tag size="large" type="danger" v-else-if="item.signup_status === '0'">报名取消</el-tag>
          <el-tag size="large" type="warning" v-else>审核中</el-tag>
          <el-dialog title="考务安排" :visible.sync="dialogFormVisible">
            <div v-if="isArranged">
              <el-row type="flex" justify="end" >
                <el-col :span=24>
                  <h4>考试名称：{{dialogForm.active_name}}</h4>
                  <p>巡考组编号：{{dialogForm.patrol_group_no}}</p>
                  <p>考场号：{{dialogForm.examination_room_no}}</p>
                  <p>教室：{{dialogForm.classroom}}</p>
                  <p>监考开始时间：{{dialogForm.invigilate_start_time}}</p>
                  <p>监考结束时间：{{dialogForm.invigilate_end_time}}</p>
                  <p>报到时间：{{dialogForm.register_time}}</p>
                  <p>培训时间：{{dialogForm.train_time}}</p>
                  <p>培训地点 ：{{dialogForm.train_address}}</p>
                </el-col>
              </el-row>
            </div>
            <div v-else>
              <el-row>
                <el-col :span=24>
                  <p>考试安排尚未出来，请耐心等待</p>
                </el-col>
              </el-row>
            </div>
          </el-dialog>
          <div class="upload_warp_img" v-show="item.imglist.length!=0">
            <div class="upload_warp_img_div" v-for="(itemList)  of item.imglist" :key="itemList.name">
              <div class="upload_warp_img_div_top">
                <div class="upload_warp_img_div_text" >
                  {{itemList.name.split('.')[0].split('_')[0]}}
                </div>
              </div>
              <a :href="getDownloadUrl(itemList.name)" > <img :src="itemList.src"></a>
            </div>
          </div>
         <center v-if="item.signup_status == 1"><el-button type="primary" @click="showExaminationArrangement(index)">查询考务安排</el-button></center>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="24"><span><hr></span></el-col>
      </el-row>
    </div>
    <div style="text-align:center" v-if="items.length > 0">已到底线</div>
    <div style="text-align:center" v-else>暂无已报名的监考活动</div>
  </div>
</template>

<script>
import { mySignupActive } from '@/api/activePublish'
import { mapGetters } from 'vuex'
import { parseTime } from '@/utils'
import axios from 'axios'
export default {
  name: 'queryActive',
  data() {
    return {
      form: {
        active_name: 'dddd',
        signup_start_date: '2018-12-01 9:00',
        signup_end_date: '2018-12-01 9:00',
        exam_start_date: '',
        exam_end_date: '',
        personnel_type: '监考',
        remark: '',
        department_code: '',
        numOfPeaple: '',
        examinationFee: '600/天',
        imglist: [{ name: 'ExcelTest.xls', src: '/src/icons/Excel.png' }]
      },
      items: [],
      loading: false,
      signup: '立即报名',
      canSignup: true,
      dialogFormVisible: false,
      dialogForm: { active_name: '',
        patrol_group_no: '',
        examination_room_no: '',
        classroom: '',
        invigilate_start_time: '',
        invigilate_end_time: '',
        register_time: '',
        train_time: '',
        train_address: ''
      },
      isArranged: false
    }
  },
  computed: {
    ...mapGetters([
      'name',
      'roles',
      'teacherTypeCode'
    ])
  },
  mounted: function() {
    const that = this
    that.loading = true
    mySignupActive(that.name).then(response => {
      if (response.exception) {
        that.processing = false
        that.$message.error(response.exception.message)
        return
      }
      const data = response.result
      for (let i = 0; i < data.length; i++) {
        // console.log(data[i]['TRAIN_TEST_TIME'] !== null)
        let fileList = []
        if (data[i]['FILEPATH'] !== null) {
          fileList = data[i]['FILEPATH'].split(',')
        }
        const imgList = []
        for (let i = 0; i < fileList.length; i++) {
          const fileExtension = fileList[i].split('.')[1]
          let imgUrl = ''
          if (fileExtension === 'xls' || fileExtension === 'xlsx') {
            imgUrl = './static/icons/Excel.png'
          } else if (fileExtension === 'doc' || fileExtension === 'docx') {
            imgUrl = './static/icons/word.png'
          } else {
            imgUrl = './static/icons/pdf.png'
          }
          imgList.push({ name: fileList[i], src: imgUrl })
        }
        that.items.push({ id: data[i]['ID'], active_id: data[i]['ACTIVE_ID'], active_name: data[i]['ACTIVENAME'],
          signup_date: parseTime(new Date(Date.parse(data[i]['SIGNUPTIME'].replace(/-/g, '/')))),
          signup_end_date: parseTime(new Date(Date.parse(data[i]['SIGNUPENDTIME'].replace(/-/g, '/')))),
          exam_start_date: parseTime(new Date(Date.parse(data[i]['EXAMSTARTTIME'].replace(/-/g, '/')))),
          exam_end_date: parseTime(new Date(Date.parse(data[i]['EXAMENDTIME'].replace(/-/g, '/')))),
          personnel_type: data[i]['PERSONNELTYPENAME'], remark: data[i]['REMARK'],
          department_name: data[i]['DEPARTMENTNAME'], numOfPeaple: data[i]['NUMOFPEAPLE'],
          examinationFee: data[i]['EXAMINATIONFEE'],
          patrol_group_no: data[i]['PATROL_GROUP_NO'],
          examination_room_no: data[i]['EXAMINATION_ROOM_NO'],
          classroom: data[i]['CLASSROOM'],
          invigilate_start_time: data[i]['INVIGILATE_START_TIME'],
          invigilate_end_time: data[i]['INVIGILATE_END_TIME'],
          register_time: data[i]['REGISTER_TIME'],
          train_time: data[i]['TRAIN_TIME'],
          train_address: data[i]['TRAIN_ADDRESS'],
          signup_status: data[i]['SIGNUPSTATUS'],
          is_traintest_pass: data[i]['IS_TRAINTEST_PASS'],
          train_test_time: data[i]['TRAIN_TEST_TIME'],
          imglist: imgList
        })
      }
      that.loading = false
    }).catch(error => {
      console.log(error)
      that.loading = false
      that.$message.error('获取数据失败...')
    })
  },
  methods: {
    transferToBoolean: function(val) {
      if (val === 'true') {
        return true
      } else {
        return false
      }
    },
    getDownloadUrl(val) {
      return '/api/download/examinationActiveFiles?fileName=' + val
    },
    downloadFile(fileName) {
      const formData = new FormData()
      formData.append('fileName', fileName)
      axios.get('/api/download').then(response => {

      }).catch(message => {
        console.log(message)
        this.$message.error('文件下载失败')
      })
    },
    showExaminationArrangement(index) {
      this.dialogFormVisible = true
      if (typeof (this.items[index].patrol_group_no) !== 'undefined' && this.items[index].patrol_group_no !== null) {
        this.isArranged = true
        this.dialogForm.active_name = this.items[index].active_name
        this.dialogForm.patrol_group_no = this.items[index].patrol_group_no
        this.dialogForm.examination_room_no = this.items[index].examination_room_no
        this.dialogForm.classroom = this.items[index].classroom
        this.dialogForm.invigilate_start_time = this.items[index].invigilate_start_time
        this.dialogForm.invigilate_end_time = this.items[index].invigilate_end_time
        this.dialogForm.register_time = this.items[index].register_time
        this.dialogForm.train_time = this.items[index].train_time
        this.dialogForm.train_address = this.items[index].train_address
      } else {
        this.isArranged = false
      }
    }

  }
}
</script>

<style scoped>
.tag{
  text-align: center;
  vertical-align: right
}
.upload_warp_img_div img {
  max-width: 100%;
  max-height: 100%;
  vertical-align: middle;
}
.upload_warp_img_div {
  position: relative;
  height: 100px;
  width: 120px;
  border: 1px solid #ccc;
  margin: 0px 30px 10px 0px;
  float: left;
  line-height: 100px;
  display: table-cell;
  text-align: center;
  background-color: #eee;
  cursor: pointer;
}
.upload_warp_img_div_top {
  position: absolute;
  top: 0;
  width: 100%;
  height: 30px;
  background-color: rgba(0, 0, 0, 0.4);
  line-height: 30px;
  text-align: left;
  color: #fff;
  font-size: 12px;
  text-indent: 4px;
}
.upload_warp_img_div_text {
  white-space: nowrap;
  width: 80%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.upload_warp_img_div_del {
  position: absolute;
  top: 6px;
  width: 16px;
  right: 4px;
}
.upload_warp_img {
  border-top: 0px solid #D2D2D2;
  padding: 14px 0 0 14px;
  overflow: hidden
}
</style>

